<template>
  <a-modal 
    title="帮助" 
    :visible="dialogVisible" 
    @cancel="dialogVisible = false"
    width="70%" 
    :footer="null"
    :destroyOnClose="true"
  >
    <a-tabs tab-position="left">
      <a-tab-pane key="tab1" tab="关于操作">
        <a-divider content-position="left">如何移动</a-divider>
        <div class="indent">鼠标移动到节点中(除功能按钮位置外的任意位置)，当鼠标变为可拖拽的图标时按下鼠标移动到新的位置松开鼠标</div>
        <a-divider content-position="left">如何运行</a-divider>
        <div class="indent">
          <p>点击左上角的“<a-icon type="pause-circle"/>”，运行模型（不会重复运行并不需要执行的步骤）</p>
          <p>点击需要运行的结点上的“<a-icon type="fullscreen" />”，展开结点，可以选择单独运行该模块（“运行”，“重新执行”）</p>
        </div>
        <a-divider content-position="left">如何配置参数</a-divider>
        <div class="indent">点击结点上的“<a-icon type="setting"/>”，即会弹出参数选项</div>
        <a-divider content-position="left">为什么我不可以配置参数</a-divider>
        <div class="indent">如果您的设置选项显示为“<a-icon class="anticon anticon-no" type="setting"/>”，请检查您是否选择了样本集</div>
      </a-tab-pane>
      <a-tab-pane key="tab2" tab="关于缓存">
        <a-divider content-position="left">模型缓存</a-divider>
        <div class="indent">
          <p>点击保存（“<a-icon type="save"/>”），将模型存入“模型管理”</p>
          <p>模型参数会在模型运行后自动保存</p>
          <p>每次自动打开上次创建的模型，如果需要创建新的模型，请在保存或者确认丢弃后点击左上角的“<a-icon type="plus"/>”</p>
        </div>
        <a-divider content-position="left">报告缓存</a-divider>
        <div class="indent">
          <p>看过的模型报告会缓存在本地，下次查看不需要再次请求</p>
          <p>但需要注意的是，这个缓存会在本应用程序关闭后丢失</p>
        </div>
      </a-tab-pane>
      <a-tab-pane key="tab3" tab="关于图标">
        <a-divider content-position="left">结点状态图标解释</a-divider>
        <div>
          <p><a-icon type="edit"
            theme="twoTone" two-tone-color="#1cc4c4"/>
            运行过且刚编辑过
          </p>
          <p><a-icon type="loading"/>
            运行中
          </p>
          <p><a-icon type="check-circle"
            theme="twoTone" two-tone-color="#52c41a"
            />
            运行成功
          </p>
          <p><a-icon type="close-circle"
            theme="twoTone" two-tone-color="#eb2f96"
            />
            运行失败
          </p>
        </div>
        <a-divider content-position="left">顶部功能按钮解释</a-divider>
        <div>
          <p><a-icon type="play-circle" /> 运行程序：不会重复运行并不需要执行的步骤</p>
          <p><a-icon type="pause-circle"/> 停止运行程序：会再点击确定后发出停止命令，在等待<span style="color:red">当前步骤执行完成后</span>停止程序</p>
          <p><a-icon type="save" /> 保存模型：将该模型保存至模型管理中，但<span style="color:red">不会保存</span>未执行的参数，如果参数需要保存且不想运行，可以点击右上角“配置信息”，导出配置参数</p>
          <p><a-icon type="cloud-upload" /> 添加缓存：将模型的唯一标识缓存到本地，清楚浏览器缓存后将<span style="color:red">丢失</span></p>
          <p><a-icon type="delete" /> 清楚缓存：将不对该模型进行缓存，可以再次选择缓存</p>
          <p><a-icon type="plus" /> 创建新模型：<span style="color:red">清楚缓存</span>，并创建一个新的模型</p>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {
      init() {
        this.dialogVisible = true
      }
    }
  }
</script>

<style scoped>
  .indent{
    text-indent: 1em;
  }
  .indent .anticon{
    zoom: 1.3;
    text-indent: initial;
  }
</style>